<template>
  <el-container>
    <el-header><my-title :title="'任务编辑'" /></el-header>
    <el-main>

      <el-tabs v-model="currentTabPane" type="border-card">
        <el-tab-pane label="任务信息" name="1">
          <el-form ref="taskForm" :model="tempTask" label-width="130px" :rules="taskRules">
            <el-form-item label="任务名称" prop="tskname">
              <el-input v-model="tempTask.tskname" style="width:180px" />
            </el-form-item>
            <el-form-item label="流程编号" prop="procno">
              <el-input v-model="tempTask.procno" style="width:180px" readonly @focus="chooseProcessClick" />
            </el-form-item>
            <el-form-item label="流程名称" prop="procname">
              <el-input v-model="tempTask.procname" style="width:180px" readonly @focus="chooseProcessClick" />
            </el-form-item>
            <el-form-item label="任务状态" prop="tskstat">
              <el-select v-model="tempTask.tskstat" placeholder="请选择">
                <el-option
                  v-for="item in dir_tskstat"
                  :key="item.id"
                  :label="item.label"
                  :value="item.data"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="节点" prop="nodesn">
              <el-input v-model="tempTask.nodesn" style="width:180px" />
            </el-form-item>
            <el-form-item label="备注" prop="content">
              <el-input v-model="tempTask.remark" style="width:180px" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-row style="text-align: center;margin-top:20px;">
          <el-button type="primary" @click="addTask">确 定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-row>

      </el-tabs>

    </el-main>

    <el-dialog title="流程选择" :visible.sync="dialogProcessVisible" :close-on-click-modal="false" center :custom-class="dialog1" append-to-body>
      <process-list @processListClose="closeProcessDialog" />
    </el-dialog>

  </el-container>
</template>
<script>
import request from '@/utils/request'
import processList from '@/components/ProcessList/index'
import { clone } from 'lodash'
export default {
  components: {
    processList
  },
  props: {
    row: Object
  },
  data: function() {
    return {
      dialog1: 'dialog1',
      tempTask: {},
      currentTabPane: '1',
      dialogProcessVisible: false,
      taskRules: {
        tskname: [
          { required: true, message: '请输入任务名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        procno: [
          { required: true, message: '请输入流程编号', trigger: 'change' }
        ],
        procname: [
          { required: true, message: '请输入流程名称', trigger: 'change' }
        ],
        tskstat: [
          { required: true, message: '请选择任务状态', trigger: 'blur' }
        ],
        nodesn: [
          { required: true, message: '请输入节点号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dir_logic: function() {
      return this.$store.state.directory.directory['logic']
    },
    dir_tskstat: function() {
      return this.$store.state.directory.directory['tskstat']
    }
  },
  created() {
    if (this.row) {
      this.tempTask = this.row
    }
    this.directoryUpdate()
  },
  methods: {
    chooseProcessClick: function() {
      this.dialogProcessVisible = true
    },
    closeProcessDialog: function(ids, objs) {
      if (objs) {
        objs.forEach((obj) => {
          this.tempTask.procno = obj.procno
          this.tempTask.procname = obj.procname
        })
      }
      this.dialogProcessVisible = false
      this.tempTask = clone(this.tempTask)
    },
    // 字典更新
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'logic')
      this.$store.commit('directory/setDirectory', 'tskstat')
    },
    // 取消
    cancel: function() {
      this.$emit('toChangePage', 'list')
    },
    // 验证所有表单
    validate: function() {
      const self = this
      return new Promise(function(resolve) {
        self.$refs['taskForm'].validate((valid) => {
          if (valid) {
            resolve(true)
          } else {
            return false
          }
        })
      })
    },
    // 添加装备任务
    addTask: function() {
      // 验证表单内容后提交
      this.validate().then(valid => {
        if (valid) {
          this.$progress.start()
          request({
            url: '/task/tasklist/edit',
            method: 'post',
            data: this.tempTask
          }).then(res => {
            this.$progress.done()
            if (res.result) {
              this.cancel()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          }
          ).catch(() => {
            this.$progress.done()
          })
        }
      })
    }
  }
}
</script>
